﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/vue.js"></script>
    <link rel="stylesheet" href="/css/index.css">
    <script src="/js/index.js"></script>
    <script src="/js/axios.min.js"></script>
    <script src="/js/jquery-3.7.0.js"></script>
</head>
<style>
    /* 基本样式 */
    body {
        font-family: Arial, sans-serif;
    }
    table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 20px;
    }
    th, td {
        text-align: center;
        padding: 10px;
        border-bottom: 3px ;
    }
    th {
        background-color: #f2f2f2;
    }
    /*button {
        margin: 0;
        padding: 5px 10px;
        border: none;
        background-color: #3a8ee6;
        color: yellow;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 10px;
        transition-duration: 0.4s;
        cursor: pointer;
    }*/


    .niceButton{
        display: inline-block;
        padding: 10px 17px;
        font-size: 15px;
        cursor: pointer;
        text-align: center;
        text-decoration: none;
        outline: none;
        color:#fff;
        background-color: forestgreen;
        border: none;
        border-radius: 10px;
        box-shadow: 0 9px #999;
    }
    .niceButton:hover{
        background-color: #1795bb;
    }
    .niceButton:active{
        background-color: #1795bb;
        box-shadow: 0 5px #666;
        transform:translateY(4px);
    }

</style>
<body>
<div id="app">
    <table border="1">
        <tr>
            <td>医生列表</td>
            <td v-for="date in dates" :key="date">{{ date }}</td>
        </tr>
        <tr v-for=" (doctor,index,career)  in doctorList">
            <td>{{doctor.name}}</td>
            <td v-for="(buttonText, index) in doctor.schedulingInfo" :key="index">
                <button class="niceButton"  v-if="buttonText.scheduling">已排班</button>
                <button class="niceButton" v-if="!buttonText.scheduling" @click="handleButtonClick(buttonText, index,doctor)">排班</button>
            </td>
        </tr>
    </table>
    <el-dialog title="排班" :visible.sync="dialogFormVisible">
        <el-form :model="form">
<!--          <el-form-item label="排班编号" :label-width="formLabelWidth">
            <el-input v-model="form.gtid" autocomplete="off"></el-input>
          </el-form-item>-->
          <el-form-item label="时间" :label-width="formLabelWidth">
            <el-input v-model="form.date" autocomplete="off"></el-input>
          </el-form-item>

            <el-form-item label="可预约次数" :label-width="formLabelWidth">
                <el-input v-model="form.num" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="费用" :label-width="formLabelWidth">
                <el-input v-model="form.price" autocomplete="off"></el-input>
            </el-form-item>
          <el-form-item label="医生ID" :label-width="formLabelWidth">
            <el-input v-model="form.careerId" autocomplete="off"></el-input>
        </el-form-item>
            <el-form-item label="医生名字" :label-width="formLabelWidth">
                <el-input v-model="form.pname" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="add">确 定</el-button>
        </div>
    </el-dialog>
</div>
<script>
    const app = new Vue({
        el: "#app",
        data() {
            return {
                dates: [], //循环日期赋值
                addOrShowButton:'添加排班',
                doctorList: [{

                  }
                ],//循环医生名称
                form: {
                    gtid: '',
                    date:'',
                    price: '',
                    num: '',
                    careerId: '',
                    pname:'',
                },
                dialogFormVisible: false,//不显示弹出框
                formLabelWidth: '100px',
            }
        },
        methods: {
            load() {
              axios.get('/syscareer/dateList').then(res => {
                this.dates = res.data.data[0].dateStringList;
                this.doctorList = res.data.data
              })
            },
            handleButtonClick(buttonText, index,d) {
                this.dialogFormVisible = true
                this.form.date = buttonText.dateString
                //alert(this.$parent.$parent.td.class)
               // this.form.careerId=d.name //医生名字
                this.form.pname=d.name
                this.form.careerId=d.careerId

               // alert(d.name)
            },
            add(){
                //定义url
                var url = "/scheduling/add";
                var _this = this;
                //使用axios向后台发请求，获取数据
                //axios.post('http://172.16.7.66:8080/dept/queryByPage', {
                axios.put(//请求方式，必须和后端资源暴露方式一致
                    url,//请求的url
                    this.form)//请求携带的参数  this.form={"deptNo":101,"deptName":"开发1部","loc":"郑1州"}
                    .then(function (response) {//成功响应的处理方法   response 是响应的数据
                        console.log(response);
                        //response 一定是json对象  stringify 把json对象转json字符串
                        //alert(JSON.stringify(response));
                        //判断返回是否正确
                        if(response.data.code==200){
                            //提示信息
                            _this.$message({
                                message: '排班成功',
                                type: 'success'
                            });
                            //关闭对话框
                            _this.dialogFormVisible = false;
                            //重新加载数据
                            _this.load();
                        }else{
                            _this.$message.error('错了哦，这是一条错误消息');
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
        },
        created() {
          this.load()
        }
    });
</script>

</body>

<style>
    * {
        padding: 0;
        margin: 0;
    }
    .is-selected {
        color: plum;
    }
    .el-calendar-table .el-calendar-day {
        height: auto !important;
        min-height: 85px;
        text-align: left;
    }
    .el-input {
        width: 300px;
    }
    .el-dialog {
        height: 500px;
        width: 500px;
    }

</style>

</html>
